import React, { useEffect, useState } from 'react'

import { Popup, Space, Button, Card, Tag, Input } from 'antd-mobile'

import { IndexBar, List } from 'antd-mobile'
import { citylist, sscity } from '../requeat/api'
function Mypop({ visible1, setVisible1 }) {
    let [city, setcity] = useState([])
    let [hotcity, sethotcity] = useState([])
    let [sdata, setsdata] = useState([])
    // 输入框
    const [value, setValue] = useState('')
    let fun = () => {
        citylist().then(res => {
            console.log('cs', res)
            if (res.data.code == 200) {
                setcity(res.data.data.city)
                sethotcity(res.data.data.hotCities)
            }
        })
    }
    useEffect(() => (
        fun()
    ), [])
    return (
        <div>
            <Popup
                visible={visible1}
                onMaskClick={() => {
                    return setVisible1(false)
                }}
                onClose={() => {
                    return setVisible1(false)
                }}
            >
                <div>
                    <h3 style={{ textAlign: 'center' }}>选择出发站</h3>
                    {/* 搜索 */}
                    <Input
                        style={{
                            margin: 10, border: '1px solid black'
                        }}
                        placeholder='请输入内容'
                        value={value}
                        onChange={val => {
                            setValue(val)
                            sscity(val).then(res => {
                                console.log('ss', res)
                                if (res.data.code == 200) {
                                    setsdata(res.data.data)
                                }

                            })
                            
                        }}
                    />
                    {/* 搜索数据 */}
                    <div style={{overflow:'auto',height:'15vh'}}>
                        <List header='搜索城市'>
                            {
                                sdata.length>0&&sdata.map((item,index)=>{
                                    return  <List.Item key={index}>{item.name}</List.Item>
                                })
                               
                            }
                           
                        </List>
                    </div>
                    {/* ------------------------------------------- */}
                    {/* 整个数据 */}
                    <div>
                        {/* 城市数据 */}
                        <Card title='热门城市' >
                            {
                                hotcity.length > 0 && hotcity.map(((item, index) => {
                                    return <Tag key={index} style={{ margin: '8px' }}>{item.name}</Tag>
                                }))
                            }
                        </Card>
                        {/* 字母 */}
                        <Card title='字母索引' >
                            {
                                city.length > 0 && city.map(((item, index) => {
                                    return <Tag key={index} style={{ margin: '8px' }}>{item.initial}</Tag>
                                }))
                            }
                        </Card>
                        {/* 城市 */}
                        <div style={{ height: '35vh' }}>
                            <IndexBar>
                                {city.length > 0 && city.map((item, index) => {
                                    return (
                                        <IndexBar.Panel
                                            index={item.initial}
                                            title={`标题${item.initial}`}
                                            key={`标题${item.initial}`}
                                        >
                                            <List>
                                                {item.list.map((item, index) => (
                                                    <List.Item key={index}>{item.name}</List.Item>
                                                ))}
                                            </List>
                                        </IndexBar.Panel>
                                    )
                                })}
                            </IndexBar>
                        </div>
                    </div>

                </div>

            </Popup>
        </div>
    )
}

export default Mypop
